<template>
  <div id="echarts1" class="echarts1" ref="echartsRef"></div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "chartTable1",
  props: {
    chart: Object, // 接收单个图表数据对象
  },
  data() {
    return {
      option: {},
      myChart: null, // 添加 ECharts 实例变量
      // chart: {
      // 	depthData: [],
      // 	currentData: [],
      // 	timeData: [],
      // 	drillingSpeedData: [],
      // },
    };
  },
  watch: {
    chart: {
      handler() {
        console.log("数据变化了");
        this.renderChart(); // 数据变化时，重新渲染图表
      },
      deep: true, // 确保能够监听到对象内部的变化
      // immediate: true, // 初始时就渲染一次
    },
  },
  components: {},
  mounted() {
    // 初始化 ECharts 实例
    this.myChart = echarts.init(document.getElementById('echarts1'));
    this.renderChart();

    // 添加窗口大小改变时的自适应
    window.addEventListener("resize", this.handleResize);
    this.renderChart();
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听
    window.removeEventListener("resize", this.handleResize);
    // 销毁 ECharts 实例
    this.myChart && this.myChart.dispose();
  },
  methods: {
    renderChart() {
      // console.log('初次调用');
      this.option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: 42,
          bottom: 50,
        },
        legend: {
          data: ["深度(m)", "电流(A)"],
          bottom: 10,
          textStyle: {
            color: "#000", // 设置图例文字颜色为白色
          },
        },
        xAxis: {
          type: "category",
          data: this.chart.timeData,
        },
        yAxis: [
          {
            type: "value",
            name: "深度(m)",
            position: "left",
            axisLabel: {
              show: true,
              formatter: function (value) {
                return parseFloat(value).toFixed(2);
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                // color: "#5470c6",
                color: "#ffc931",
              },
            },
          },
          {
            type: "value",
            name: "电流(A)",
            position: "right",
            axisLabel: {
              show: true,
              formatter: function (value) {
                return parseFloat(value).toFixed(2);
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#91cc75",
              },
            },
          },
        ],
        series: [
          {
            name: "深度(m)",
            type: "line",
            data: this.chart.depthData,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              color: "#ffc931", // 添加数据线的颜色，与坐标轴颜色保持一致
            },
            itemStyle: {
              color: "#ffc931", // 添加数据点的颜色
            },
          },
          {
            name: "电流(A)",
            type: "line",
            data: this.chart.currentData,
            yAxisIndex: 1,
            showSymbol: false,
            lineStyle: {
              color: "#91cc75", // 添加数据线的颜色，与坐标轴颜色保持一致
            },
            itemStyle: {
              color: "#91cc75", // 添加数据点的颜色
            },
          },
        ],
      };
      // 使用 setOption 更新图表
      this.myChart && this.myChart.setOption(this.option, true);
    },
    handleResize() {
      this.myChart && this.myChart.resize();
    },
  },
};
</script>

<style>
.echarts1 {
  width: 100%;
  height: 100%;
  /* border: 1px solid red; */
  /* min-height: 400px; */
}
</style>
